<template>
    <div class="space-y-6">
        <!-- 步骤详情卡片 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="p-5 border-b border-neutral-medium/30">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white mr-3">
                        <i class="fa fa-gavel"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold">4. 案件裁决</h3>
                        <p class="text-sm text-neutral mt-0.5">根据证据和调解情况作出公正裁决</p>
                    </div>
                </div>
            </div>

            <div class="p-5">
                <div class="space-y-5">
                    <div>
                        <h4 class="text-sm font-medium mb-2">阶段说明</h4>
                        <p class="text-sm text-neutral leading-relaxed">
                            案件裁决阶段是争议处理的关键环节，处理人员将根据双方提交的证据材料、调解记录和相关法律法规，
                            对争议案件作出公正合理的裁决。裁决结果将以书面形式通知双方当事人，并说明裁决依据和理由。
                        </p>
                    </div>

                    <div>
                        <h4 class="text-sm font-medium mb-2">操作步骤</h4>
                        <ol class="space-y-3 text-sm">
                            <li v-for="(step, index) in operationSteps" :key="index" class="flex">
                                <span
                                    class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">
                                    {{ index + 1 }}
                                </span>
                                <div>
                                    <p class="font-medium">{{ step.title }}</p>
                                    <p class="text-neutral mt-1">{{ step.description }}</p>
                                </div>
                            </li>
                        </ol>
                    </div>

                    <div>
                        <h4 class="text-sm font-medium mb-2">所需材料</h4>
                        <div class="bg-neutral-light/50 rounded-lg p-3">
                            <ul class="space-y-2 text-sm">
                                <li v-for="(material, index) in requiredMaterials" :key="index"
                                    class="flex items-start">
                                    <i class="fa fa-file-text-o text-primary mt-1 mr-2"></i>
                                    <span>{{ material }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div>
                        <h4 class="text-sm font-medium mb-2">常见问题</h4>
                        <div class="space-y-3">
                            <div v-for="(faq, index) in faqs" :key="index"
                                class="border border-neutral-medium/30 rounded-lg overflow-hidden">
                                <button
                                    class="w-full flex items-center justify-between p-3 text-left hover:bg-neutral-light/50 transition-bg"
                                    @click="toggleFaq(index)">
                                    <span class="text-sm font-medium">{{ faq.question }}</span>
                                    <i class="fa"
                                        :class="faq.open ? 'fa-angle-up text-primary' : 'fa-angle-down text-neutral'"></i>
                                </button>
                                <div class="p-3 border-t border-neutral-medium/30 bg-neutral-light/30"
                                    v-show="faq.open">
                                    <p class="text-sm text-neutral">
                                        {{ faq.answer }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="pt-3 border-t border-neutral-medium/30">
                        <h4 class="text-sm font-medium mb-3">操作工具</h4>
                        <div class="flex flex-wrap gap-3">
                            <button v-for="(tool, index) in tools" :key="index"
                                class="flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors text-sm"
                                :class="tool.primary ? 'bg-primary hover:bg-primary/90 text-white' : 'border border-primary text-primary hover:bg-primary/5'"
                                @click="useTool(tool.name)">
                                <i :class="tool.icon"></i>
                                <span>{{ tool.name }}</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 相关案例 (使用 ProcessCases 组件) -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="p-5 border-b border-neutral-medium/30 flex justify-between items-center">
                <h3 class="font-semibold">参考案例</h3>
                <button class="text-primary text-sm hover:underline">查看更多</button>
            </div>

            <div class="p-5">
                <ProcessCases />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ProcessCases from './ProcessCases.vue'

interface OperationStep {
    title: string
    description: string
}

interface FAQ {
    question: string
    answer: string
    open: boolean
}

interface Tool {
    name: string
    icon: string
    primary: boolean
}

const operationSteps: OperationStep[] = [
    {
        title: '审核全部案件材料',
        description: '仔细查阅双方提交的证据、陈述材料和调解记录'
    },
    {
        title: '确定适用的法律法规',
        description: '根据争议类型，查找相关的法律条文和处理标准'
    },
    {
        title: '作出初步裁决意见',
        description: '基于事实和法律，形成初步的裁决方案'
    },
    {
        title: '审核与复核',
        description: '由高级处理人员或审核小组对初步裁决进行复核'
    },
    {
        title: '生成正式裁决书',
        description: '制作规范的裁决文书，明确裁决结果和执行要求'
    },
    {
        title: '通知双方当事人',
        description: '以书面和电子形式将裁决结果通知争议双方'
    }
]

const requiredMaterials: string[] = [
    '双方当事人身份证明材料',
    '争议事件相关证据（合同、照片、录音等）',
    '调解记录表及双方陈述材料',
    '相关法律法规条文引用',
    '处理人员调查笔记（如适用）'
]

const faqs = ref<FAQ[]>([
    {
        question: '当事人对裁决结果不满意怎么办？',
        answer: '当事人对裁决结果不满意的，可以在收到裁决书之日起15个工作日内，向本机构提出复核申请，并提供新的证据材料。复核申请将由高级处理团队进行重新审查。',
        open: false
    },
    {
        question: '裁决结果的法律效力如何？',
        answer: '',
        open: false
    },
    {
        question: '裁决书包括哪些内容？',
        answer: '',
        open: false
    }
])

const tools: Tool[] = [
    {
        name: '生成裁决书',
        icon: 'fa fa-file-text-o',
        primary: true
    },
    {
        name: '查看历史案例',
        icon: 'fa fa-history',
        primary: false
    },
    {
        name: '法律条文查询',
        icon: 'fa fa-book',
        primary: false
    },
    {
        name: '帮助指南',
        icon: 'fa fa-question-circle-o',
        primary: false
    }
]

const toggleFaq = (index: number) => {
    faqs.value[index].open = !faqs.value[index].open
}

const useTool = (toolName: string) => {
    alert(`打开工具: ${toolName}\n在实际应用中，这里会打开相应的工具界面`)
}
</script>
